<!DOCTYPE html>
<html lang="zh-cmn-Hans">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
		<title>鹿程智慧油站商户平台</title>
		<meta name="description" content="鹿程科技是提供加油站互联网化零管系统、营销及支付和大数据分析运营服务的行业领先科技公司。鹿程科技充分了解加油站行业的需求和新兴互联网的发展,依靠业内最先进的科技和标准化的运营,持续帮助油站业务发展创造价值。"/>
		<meta name="keywords" content="智慧油站,鹿程,鹿程智慧油站,鹿程智慧油站微信支付,加油站微信支付,加油站营销管理"/>
		<link rel="icon" href="https://static.zhihuiyouzhan.com.cn/static/styles/admin/img/title.ico" type="image/x-icon">
		<link rel="shortcut icon" href="https://static.zhihuiyouzhan.com.cn/static/styles/admin/img/title.ico" type="image/x-icon">
		<link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
		<link rel="stylesheet" href="../layui/css/layui.css" />
		<link rel="stylesheet" href="../css/style.css" />
	</head>
<body>
	<section class="section-right">
		<!--deer-tit-->
		<div class="deer-tit">
			<h3>营销分析</h3>
			<h4>综合分析</h4>
		</div>
		<!--/deer-tit-->
		<!--deer-content-->
		<div class="deer-content">
			<form class="marketing-found layui-form biz-checkboxes-form" id="form" method="post" action="">
				<dl>
                <dt>投入报销：</dt>
                <dd class="marketing">
                    <input type="checkbox" name="num1"  title="不限"  lay-skin="primary" lay-filter="checked1" checked>
                    <input type="checkbox"  value="1" name="marketing[]" lay-skin="primary" title='券营销'>
                    <input type="checkbox"  value="60" name="marketing[]" lay-skin="primary" title='价格营销'>
                    <input type="checkbox"  value="72" name="marketing[]" lay-skin="primary" title='积分营销'>
                </dd>
				</dl>
				<dl>
					<dt>费用：</dt>					
					<dd class="Cost">
                    <input type="checkbox" name="num2"  title="不限" lay-skin="primary" lay-filter="checked2" checked>
                    <input type="checkbox"  value="71" name="Cost[]" lay-skin="primary" title='现金'>
                    <input type="checkbox"  value="60" name="Cost[]" lay-skin="primary" title='银行卡'>
                    <input type="checkbox"  value="72" name="Cost[]" lay-skin="primary" title='微信'>
                    <input type="checkbox"  value="72" name="Cost[]" lay-skin="primary" title='卡共享'>
                    <input type="checkbox"  value="72" name="Cost[]" lay-skin="primary" title='混合'>
                    <input type="checkbox"  value="72" name="Cost[]" lay-skin="primary" title='云端卡'>
                    <input type="checkbox"  value="72" name="Cost[]" lay-skin="primary" title='未知'>
                    <input type="checkbox"  value="72" name="Cost[]" lay-skin="primary" title='加油卡卡账'>
                </dd>
				</dl>
				<dl>
					<dt>支付方式：</dt>					
					<dd class="pay_type">
                    <input type="checkbox" name="num3"  title="不限"lay-skin="primary" lay-filter="checked3" checked>
                    <input  type="checkbox" value="2" name="pay_type[]" lay-skin="primary" title="微信支付">
                    <input  type="checkbox" value="3" name="pay_type[]" lay-skin="primary" title="储值卡（APP）">
                    <input  type="checkbox" value="4" name="pay_type[]" lay-skin="primary" title="微信公众号（受理）">
                    <input  type="checkbox" value="5" name="pay_type[]" lay-skin="primary" title="APP微信支付">
                    <input  type="checkbox" value="6" name="pay_type[]" lay-skin="primary" title="微信扫码（受理）">
                    <input  type="checkbox" value="7" name="pay_type[]" lay-skin="primary" title="广大.微信公众号">
                    <input  type="checkbox" value="8" name="pay_type[]" lay-skin="primary" title="支付宝被扫（受理）">
                    <input  type="checkbox" value="9" name="pay_type[]" lay-skin="primary" title="建行WAP支付">
                </dd>
				</dl>
				<dl>
					<dt>单位：</dt>
		                <dd class="unit">
		                    <input type="checkbox" name="num4"  lay-skin="primary" title="不限" lay-filter="checked4" checked>
		                    <input type="checkbox"  value="1" name="unit[]" lay-skin="primary" title='升数'>
		                    <input type="checkbox"  value="2" name="unit[]" lay-skin="primary" title='笔数'>
		                    <input type="checkbox"  value="3" name="unit[]" lay-skin="primary" title='金额'>
		                </dd>
				</dl>
				<dl>
					<dt>时间维度:</dt>
					<dd style="padding: 0;border: 0;">
					   	<select name="data" lay-filter="data">
					        <option value="1">日</option>
	                        <option value="2">月</option>
	                        <option value="3">年</option>
				   		</select>
					</dd>
				</dl>
				<dl>
					<dt>查询时间:</dt>
					<dd>
						<input  class="biz-time active" type="text" placeholder="时间" id="time_day" value="">
						<input  class="biz-time noact" type="text" placeholder="时间" id="time_month" value="">
						<input  class="biz-time noact" type="text" placeholder="时间" id="time_year" value="">
					</dd>
				</dl>
				<dl class="clearfix " style="margin-left: 120px;">				
					<div class="order-nav-search">
						<dl>
							<button class="deer-btn" lay-submit lay-filter="*">查询</button>
	            			<button class="deer-btns" type="reset">复位</button>
						</dl>            		
	            	</div>            		
            	</dl>
			</form>
			
			<!--////-->
			<div class="biz-card"> 
				<dl>
					<dt>累计发生费用</dt>
					<dd><span>0.00元</span></dd>
				</dl>
				<dl>
					<dt>日均发生费用</dt>
					<dd><span>0.00元</span></dd>
				</dl>
				<dl>
					<dt>累计产出销量</dt>
					<dd><span>0.00升</span></dd>
				</dl>
				<dl>
					<dt>日均产出销量</dt>
					<dd><span>0升</span></dd>
				</dl>
			</div>
			
			<div class="biz-title">
				<div style="border-bottom: 1px solid #e7e7e7;"> 
				<h6>投入产出图表</h6>
				</div>
				<div class="biz-tubiao">
					<div class="echarts_box" id="main"></div>
				</div>
			</div>
		</div>
			
		<!--/deer-content-->
	</section>
	<!--js-->
		<aside>
			
			<script type="text/javascript" src="../layui/layui.js" ></script>
			<script type="text/javascript" src="../js/echarts.min.js" ></script>
			<script type="text/javascript">
				layui.use(['laydate','form','jquery'],function(){
					var	form=layui.form;
					var $=layui.jquery;
					var laydate=layui.laydate;
					laydate.render({
						        elem: '#time_day', //指定元素
						        max:0,
						        range: '至',
				    	});
				    	laydate.render({
						        elem: '#time_month', //指定元素
						        type:'month'
						       
				    	});
				    	laydate.render({
						        elem: '#time_year', //指定元素
						        type:'year'
						       
				    	});
				    //日期选择监听
					form.on('select(data)', function(data){
						if(data.value == "1"){
							$("#time_day").addClass("active").removeClass("noact").siblings().addClass("noact");
						}
						if(data.value == "2"){
							$("#time_month").addClass("active").removeClass("noact").siblings().addClass("noact");
						}
						if(data.value == "3"){
							$("#time_year").addClass("active").removeClass("noact").siblings().addClass("noact");
						}
					  
					});
					form.on('submit(*)',function(data){
						console.log(data.field);
						return false;
					})
				//全选
				form.on('checkbox(checked1)', function(data){
	                checkeds(data)
	            });
				checkedAlls($('.marketing'))
	
				form.on('checkbox(checked2)', function(data){
	                checkeds(data)
	            });
	            checkedAlls($('.Cost'))
	            
	            form.on('checkbox(checked3)', function(data){
	                checkeds(data)
	            });
				checkedAlls($('.pay_type'))
	
				form.on('checkbox(checked4)', function(data){
	                checkeds(data)
	            });
				checkedAlls($('.unit'))
	           
	            
	            //判断是否全选
	            function checkeds(data){
	                var checkDiv=$(data.elem).parent().children('.layui-form-checkbox')
	                var checked=$(data.elem).parent().children(':checkbox')
	                if($(data.othis).hasClass('layui-form-checked')){
	                	checkDiv.removeClass('layui-form-checked')
	                    checked.each(function(index,value){
	                        value.checked = data.elem.checked;
	                    })                    
	                }else{
	                	checkDiv.removeClass('layui-form-checked');                	
	                    checked.each(function(index,value){
	                        value.checked = false;
	                    })
	                	$(data.othis).addClass('layui-form-checked');                   
	                }
	            }
				//全选判断
	            function checkedAlls(all){
	            	var nums=0
					all.on('click','.layui-form-checkbox:gt(0)',function () {
						var num=0
						all.find('.layui-form-checkbox:gt(0)').each(function(index,value){
							if($(value).hasClass('layui-form-checked')==false){
								num++
							}
						})
						if(num){
								all.find('.layui-form-checkbox').eq(0).removeClass('layui-form-checked')
										
						}else{
							all.find('.layui-form-checkbox').eq(0).addClass('layui-form-checked');
							//all.find('.layui-form-checkbox:gt(0)').removeClass('layui-form-checked');
						}
					})
					
						all.find('.layui-form-checkbox:gt(0)').each(function(index,value){
							if($(value).hasClass('layui-form-checked')==false){
								nums++
							}
						})
						if(nums){
							all.find('.layui-form-checkbox').eq(0).addClass('layui-form-checked')
						}else{
							all.find('.layui-form-checkbox').eq(0).removeClass('layui-form-checked')
							all.find('.layui-form-checkbox:gt(0)').removeClass('layui-form-checked');
							
						}					
					}
				})				
				// 基于准备好的dom，初始化echarts实例
		        var myChart = echarts.init(document.getElementById('main'));
		
		        // 指定图表的配置项和数据
		        var option = {
		            tooltip : {
		                trigger: 'axis',
		                axisPointer: {
		                    type: 'cross',
		                    label: {
		                        backgroundColor: '#6a7985'
		                    }
		                }
		            },
		            legend: {
		                data:['0#销量','95#销量','96#销量']
		            },
		            toolbox: {
		                feature: {
		                    saveAsImage: {}
		                }
		            },
		            xAxis : [
		                {
		                    type : 'category',
		                    data : ['10-06','10-07','10-08']
		                }
		            ],
		            yAxis : [
		                {
		                    type : 'value'
		                }
		            ],
		            series : [
		                {
		                    name:'0#销量',
		                    type:'bar',
		                    data:[320, 332, 301]
		                },
		                {
		                    name:'95#销量',
		                    type:'bar',
		                    data:[320, 332, 301]
		                },
		                {
		                    name:'96#销量',
		                    type:'bar',
		                    data:[320, 332, 301]
		                }
		            ]
		        };
		
		        // 使用刚指定的配置项和数据显示图表。
		        myChart.setOption(option);

			</script>
		</aside>
		<!--/js-->
</body>
</html>
